<template>
	<view>
		<!-- 我的余额 -->
		<view class="balance">
			<view class="top">
				<text>优生活账户余额</text>
				<text>{{ info.balance || 0.00 }}</text>
			</view>
			<view class="butbox" @click="navJuanTopUp">
				金福提货券充值
			</view>
			<!-- <view class="down">
				<view class="down_item">
					<text>已获得</text>
					<text>{{ info.getmoney || 0.00 }}</text>
				</view>
				<view class="down_item	">
					<text>已使用</text>
					<text>{{ info.usemoney || 0.00 }}</text>
				</view>
			</view> -->
		</view>
		<!-- <view class="balance">
			<view class="top">
				<text>账户余额</text>
				<text>{{ info.wx_balance || 0.00 }}</text>
			</view>
			<view class="butbox" @click="navWXTopUp()">
				微信充值
			</view>
		</view> -->

		<!-- 充值 -->
		<!-- <view class="top_up">
			<view class="top_up_item" @click="navJuanTopUp" style="display: flex;align-items: center;">
				<image src="@/static/juan.png"></image>
				<view>
					<view>金福提货</view>
					<view>券充值</view>
				</view>
			</view>
			<view class="top_up_item" @click="navWXTopUp">
				<image src="@/static/wx.png"></image>
				<text>微信充值</text>
			</view>
		</view> -->

		<!-- 余额明细 -->
		<view class="balance_details" v-for="item in list" :key="`record-${item.time}`">
			<view class="title">
				<text>优生活余额明细</text>
				<!-- <text>支出：￥{{ getTotalPay(item.list) }}</text> -->
			</view>
			<view class="date">
				<view class="date_content">
					<view class="text">
						<text>{{ item.time.split('-')[1] }}</text>月<text>{{ item.time.split('-')[0] }}</text>
					</view>
					<view @click="sequence = !sequence">
						<image src="@/static/down@1.png" v-if="sequence"></image>
						<image src="../../static/top@1.png" v-else></image>
					</view>
				</view>
				<!-- <view>
					收入：￥{{ getTotalReceive(item.list) }}
				</view> -->
			</view>
			<view class="content_box">
				<view class="item" v-for="ite in item.list" :key="`record-item-${item.id}`">
					<view class="left">
						<text>{{ ite.memo }}</text>
						<text>{{ dateFormat(ite.createtime) }}</text>
					</view>
					<view class="right" :style="{
						color:ite.type!=2?'#F94D29':'#222222'
					}">{{ ite.type == 2 ? '+' : '-' }}￥{{ ite.money }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sequence: false,
				info: null,
				list: [],
				myinfo: {},
			};
		},
		onShow() {
			// this.tableList()
			this.getInfo()
			this.getmyinfo()
		},
		methods: {
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			getInfo() {
				this.$http({
					url: '/api/Wechat/balanceList',
				}).then(res => {
					this.info = res.data
					let list = res.data.list
					let obj = {}
					list.forEach(item => {
						let date = new Date(item.createtime * 1000)
						let year = date.getFullYear()
						let month = date.getMonth() + 1
						let key = `${year}-${month}`
						if (obj[key]) {
							obj[key].push(item)
						} else {
							obj[key] = [item]
						}
					})
					let arr = []
					for (let key in obj) {
						arr.push({
							time: key,
							list: obj[key]
						})
					}
					this.list = arr
					if (this.list.length == 0) {
						this.kong = false
					} else {
						this.kong = true
					}
				})
			},
			tableList() {
				this.$http({
					url: 'api/wechat/getCardBalance',
					data: {
						card_no: '8888100000012854',
						card_pin: '223872'
					}
				}).then(res => {
					console.log(res, '....余额')
				})
			},
			// 跳转提货卷充值
			navJuanTopUp() {
				if (this.myinfo.mainPhone) {
					uni.navigateTo({
						url: "/personalData/juanTopUp/juanTopUp"
					})
				} else {
					uni.navigateTo({
						url: "/personalData/personalInfo/personalInfo"
					})
				}
			},
			getmyinfo() {
				this.$http({
					url: 'api/Wechat/userinfo'
				}).then(res => {
					this.myinfo = res.data
				})
			},
			// 跳转微信充值
			navWXTopUp() {
				uni.navigateTo({
					url: "/personalData/WXTopUp/WXTopUp",
					//personalData/records/records
				})
			},
			getTotalPay(list) {
				return list.filter(item => item.type == 1).map(item => +item.money).reduce((total, cur) => total + cur, 0)
			},
			getTotalReceive(list) {
				return list.filter(item => item.type == 2).map(item => +item.money).reduce((total, cur) => total + cur, 0)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 我的余额
	.balance {
		width: 690rpx;
		height: 198rpx;
		// background: linear-gradient(315deg, #F99529 0%, #F94D29 100%);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin: 0 30rpx 24rpx 30rpx;
		background-image: url("https://zdcloud.zxkjnc.com/images/642bed5.png");
		background-size: 100% 100%;
		display: flex;
		// flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 30rpx;

			text:first-child {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 1em;
				margin-top: 40rpx;
			}

			text:last-child {
				margin-top: 34rpx;
				line-height: 1em;
				font-size: 56rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.butbox {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #1A1A1A;
			width: fit-content;
			padding: 0 20rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 28rpx;
			margin-right: 30rpx;
			background-color: #FFF;
		}

		.down {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.down_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 50%;

				text:first-child {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 1em;
				}

				text:last-child {
					margin-top: 34rpx;
					margin-bottom: 36rpx;
					line-height: 1em;
					font-size: 40rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}

	// 充值
	.top_up {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto 4rpx auto;

		.top_up_item {
			width: 334rpx;
			height: 110rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;

			image {
				width: 76rpx;
				height: 76rpx;
				margin: 0 24rpx 0 52rpx;
			}

			text {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				line-height: 1em;
			}
		}
	}

	// 余额明细
	.balance_details {
		width: 690rpx;
		margin: 40rpx 30rpx 0 30rpx;

		.title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			line-height: 1em;

			text:last-child {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
			}
		}

		.date {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;

			.date_content {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				display: flex;
				align-items: center;

				.text {
					text:first-child {
						font-size: 36rpx;
						line-height: 1em;
					}

					text:last-child {
						margin-left: 6rpx
					}
				}

				image {
					width: 18rpx;
					height: 14rpx;
					margin-left: 14rpx;
				}
			}

			view:last-child {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
			}
		}

		.content_box {
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			margin-top: 28rpx;

			.item:last-child {
				border: none;
			}

			.item {
				height: 158rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				border-bottom: 1rpx solid #ECECEC;

				.left {
					display: flex;
					flex-direction: column;
					gap: 24rpx 0;

					text:first-child {
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #222222;
						line-height: 1em;
					}

					text:last-child {
						font-size: 26rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #555555;
						line-height: 1em;
					}
				}

				.right {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					line-height: 1em;
				}
			}
		}
	}
</style>